<template>
  <div id="improviseSearch">
    <v-header title="即席查询" :showDownloadBtn="false" :saveShow="false"></v-header>
    <el-row class="main-cont">
      <el-col :span="4" class="menu-box">
        <div class="menu-search">
          <el-select v-model="metaDataPkg" @change="getMetaTableColumeList" filterable clearable>
            <el-option v-for="item in metaDataPkgList"
                       :key="item.key"
                       :label="item.pkg_name"
                       :value="item.meta_id">
            </el-option>
          </el-select>
        </div>
        <div class="menu-tree">
          <template v-if="menuTree.length > 0">
            <div v-for="(table, index) in menuTree" class="menu-item" :key="table.obj.meta_id">
                            <span :class="{'title':true, 'show':isShowColumes[index]}"
                                  @click="toggleMetaTree(index)">
                            {{ table.obj.table_name_cns }}
                            </span>
              <template v-if="table.children">
                <ul>
                  <li v-for="(colume, index) in table.children"
                      :key="colume.obj.meta_id"
                      draggable="true"
                      @dragstart="handleDragStart($event, colume.obj)">
                    <span>{{ colume.obj.colume_chs }}</span>
                    <el-popover
                      placement="right"
                      width="200"
                      visible-arrow="false"
                      trigger="click"
                      @after-leave="handleLeave(index)">
                      <div class="col-set-box">
                        <el-checkbox label="添加到条件组"
                                     @change="handleColumeSetting($event, colume.obj)"></el-checkbox>
                      </div>
                      <el-button class="el-icon-plus" type="text" slot="reference"></el-button>
                    </el-popover>
                  </li>
                </ul>
              </template>
            </div>
          </template>
          <template v-else>
            <div class="no_record_box">暂无数据</div>
          </template>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="data-table-box">
          <div class="cond-select-box">
            <el-row :gutter="10">
              <el-col :span="5">
                <div class="query-col-box">
                  <div class="title">
                    <h3>显示</h3>
                  </div>
                  <happy-scroll color="rgba(141, 196, 235, .5)" resize>
                    <div class="columes-box" @drop="handleDrop($event)"
                         @dragover="handleDragOver($event)">
                      <template v-if="s_list.length > 0">
                        <ul>
                          <li v-for="colume in s_list"
                              :key="colume.meta_id"
                              v-dragging="{item:colume, list:s_list, group:null}">
                            <span>{{ colume.vs_colume_chs }}</span>
                            <el-popover
                              placement="right"
                              width="200"
                              visible-arrow="true"
                              trigger="click">
                              <div class="check-box">
                                <v-my-tree :treeData="treeData"
                                           v-on:on-setting-change="handleSetting($event, colume)"></v-my-tree>
                              </div>
                              <el-button type="text" class="el-icon-setting"
                                         slot="reference"></el-button>
                            </el-popover>
                          </li>
                        </ul>
                      </template>
                      <template v-else>
                        <div class="no_record_box">暂无数据</div>
                      </template>
                    </div>
                  </happy-scroll>
                </div>
              </el-col>
              <el-col :span="19">
                <div class="query-criteria-box">
                  <div class="join-box">
                    <el-tabs v-model="editableTabsValue" type="card"
                             @tab-click="handleTabClick"
                             class="tab-nav">
                      <el-tab-pane label="分组" name="1"></el-tab-pane>
                      <el-tab-pane label="条件" name="2"></el-tab-pane>
                      <el-tab-pane label="关联" name="3"></el-tab-pane>
                    </el-tabs>
                    <div class="tab-cont">
                      <happy-scroll color="rgba(141, 196, 235, .5)" resize hide-horizontal>
                        <div>
                          <template v-if="editableTabsValue === '1'">
                            <el-row class="group-box">
                              <el-col :span="9">
                                <el-select v-model="group_list" multiple placeholder="请选择"
                                           collapse-tags
                                           clearable key="select01"
                                           @change="handleGroupChange">
                                  <el-option v-for="item in cond_arr1"
                                             :key="item.meta_id"
                                             :label="item.vs_colume_chs"
                                             :value="item.meta_id">
                                  </el-option>
                                </el-select>
                              </el-col>
                            </el-row>
                          </template>
                          <template v-if="editableTabsValue === '2'">
                            <div class="link-query-box">
                              <div class="condition-set-box" ref="w_list">
                                <div v-for="(group, index) in w_list"
                                     :key="group.key"
                                     ref="conditionGList"
                                     class="condition-list-group">
                                  <el-button type="primary" plain
                                             @click="toggleRelation(group)"
                                             class="condition-btn" v-if="isMultiGroup">{{
                                    group.vs_bool_code_value === 'and' ? '且' : '或' }}
                                  </el-button>
                                  <div v-for="(item, gindex) in group.cond_groups"
                                       :key="gindex">
                                    <div class="relation-box" v-if="gindex !== 0">
                                      <el-button type="primary" plain
                                                 @click="toggleRelation(item)">{{
                                        item.vs_bool_code_value === 'and' ? '且' :
                                        '或' }}
                                      </el-button>
                                    </div>
                                    <el-row :gutter="10" class="condition-groups">
                                      <el-col :span="5" class="item">
                                        <el-select v-model="item.meta_id"
                                                   placeholder="请选择"
                                                   @change="handleCondChange(item)">
                                          <el-option v-for="val in cond_arr1"
                                                     :key="val.key"
                                                     :label="val.vs_colume_chs"
                                                     :value="val.meta_id">
                                          </el-option>
                                        </el-select>
                                      </el-col>
                                      <el-col :span="5" class="item">
                                        <el-select v-model="item.vs_code_value"
                                                   placeholder="请选择"
                                                   @change="handleCondSymbolChange(item)">
                                          <el-option
                                            v-for="val in item.vs_cond_list"
                                            :key="val.key"
                                            :label="val.code_value_nm_cns"
                                            :value="val.code_value">
                                          </el-option>
                                        </el-select>
                                      </el-col>
                                      <template v-if="item.vs_input_num === 1">
                                        <el-col class="item" :span="5">
                                          <el-input
                                            v-model="item.cond_value[0]"></el-input>
                                        </el-col>
                                      </template>
                                      <template v-if="item.vs_input_num === 2">
                                        <el-col class="item" :span="5">
                                          <el-date-picker
                                            v-model="item.cond_value[0]"
                                            type="date"
                                            v-if="item.vs_data_type === 'date'"></el-date-picker>
                                          <el-input v-model="item.cond_value[0]"
                                                    v-else></el-input>
                                        </el-col>
                                        <el-col class="item" :span="5">
                                          <el-date-picker
                                            v-model="item.cond_value[1]"
                                            type="date"
                                            v-if="item.vs_data_type === 'date'"></el-date-picker>
                                          <el-input v-model="item.cond_value[1]"
                                                    v-else></el-input>
                                        </el-col>
                                      </template>
                                      <el-col class="item" :span="4">
                                        <el-button class="el-icon-close" type="text"
                                                   @click="removeCond(index, gindex)"></el-button>
                                        <el-button class="el-icon-plus" type="text"
                                                   @click="addCond(group, gindex)"></el-button>
                                      </el-col>
                                    </el-row>
                                  </div>
                                </div>
                              </div>
                              <div class="add-condition">
                                <el-button type="primary" plain class="el-icon-plus"
                                           @click="addCondList"></el-button>
                                <span>筛选条件</span>
                              </div>
                            </div>
                          </template>
                          <template v-if="editableTabsValue === '3'">
                            <div>
                              <el-row :gutter="10" class="related-box">
                                <el-col :span="9">
                                  <el-select v-model="unionObj.vs_meta_id1"
                                             placeholder="请选择" key="select02" clearable
                                             @change="handleUnionChange($event, '1')">
                                    <el-option v-for="item in cond_arr1"
                                               :key="item.meta_id"
                                               :label="item.vs_table_name_cns + '.' +item.vs_colume_chs"
                                               :value="item.meta_id">
                                    </el-option>
                                  </el-select>
                                </el-col>
                                <el-col :span="2">
                                  <span class="mark">=</span>
                                </el-col>
                                <el-col :span="9">
                                  <el-select v-model="unionObj.vs_meta_id2"
                                             placeholder="请选择" key="select03" clearable
                                             @change="handleUnionChange($event, '2')">
                                    <el-option v-for="item in cond_arr1"
                                               :key="item.meta_id"
                                               :label="item.vs_table_name_cns + '.' +item.vs_colume_chs"
                                               :value="item.meta_id">
                                    </el-option>
                                  </el-select>
                                </el-col>
                                <el-col :span="4">
                                  <el-button type="primary" size="small"
                                             @click="addTableRelation">确定
                                  </el-button>
                                </el-col>
                              </el-row>
                              <div class="sql-show-box">
                                <div class="sql-head">
                                  <h3 class="title">关联列表</h3>
                                  <el-select v-model="showType" placeholder="请选择">
                                    <el-option
                                      v-for="item in options"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value">
                                    </el-option>
                                  </el-select>
                                </div>
                                <div class="cont-box">
                                  <template v-if="u_list.length > 0">
                                    <ul>
                                      <li v-for="(item, index) in showSqlList"
                                          :key="index">
                                        <span v-if="showType === '1'">{{ item.rel_str }}</span>
                                        <span v-else-if="showType === '2'">{{ item.rel_code }}</span>
                                        <span v-else-if="showType === '3'">{{ item.rel_chs }}</span>
                                        <div class="edit-box">
                                          <el-button type="text"
                                                     class="el-icon-close"
                                                     @click="removeTableRelation(item)"></el-button>
                                        </div>
                                      </li>
                                    </ul>
                                  </template>
                                  <template v-else>
                                    <div class="no_record_box">暂无数据</div>
                                  </template>
                                </div>
                              </div>
                            </div>
                          </template>
                        </div>
                      </happy-scroll>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="button-group-box">
            <el-button @click="reset">重置</el-button>
            <el-button type="primary" @click="queryList">查询</el-button>
          </div>
          <div class="data-box" v-if="s_list.length > 0">
            <div class="button-group-box">
              <el-button type="primary" @click="toggleEchart">{{ contShowText }}</el-button>
            </div>
            <template v-if="contShowType === '1'">
              <el-table :data="tableData" ref="singleTable" border stripe>
                <el-table-column type="selection"></el-table-column>
                <el-table-column v-for="(item, index) in s_list" :key="index"
                                 :prop="item.vs_colume_name" :label="item.vs_colume_chs"
                                 :sortable="item.vs_st0001"></el-table-column>
              </el-table>
              <el-pagination
                :page-size="pageSize"
                :current-page.sync="pageNo"
                :total="pageTotal"
                layout="total,sizes,prev,pager,next,jumper"
                :page-sizes="[5,10,15,20]"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"></el-pagination>
            </template>
            <template v-if="contShowType === '2'">
              <chart :options="chartOption" v-if="chartData"></chart>
              <div class="no_record_box" v-else>
                <p>暂无可展示的图表数据</p>
              </div>
            </template>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {VHeader} from '../../../../components'
  import VMyTree from './comm/myTree'
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'

  let treeData = [
    {
      meta_id: 'vs_st0001',
      tgt_name: '排序'
    },
    {
      meta_id: 'vs_rm0002',
      tgt_name: '删除'
    },
    {
      meta_id: 'vs_ct0003',
      tgt_name: '统计',
      children: []
    }
  ]
  let option = {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: []
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: []
  }
  export default {
    components: {
      VHeader,
      VMyTree
    },
    data () {
      return {
        // 左边数据表数据
        metaDataPkg: '',
        metaDataPkgList: [],
        menuTree: [],
        s_list: [], // 查询列数集合
        temp_s_list: [],
        isShowColumes: [false], // 是否显示字段
        tableData: [],
        treeData: treeData,
        commonData: {},
        isMultiGroup: false, // 是否具有多个分组条件
        cond_arr1: [], // 条件筛选第一框
        w_list: [], // 条件集合
        editableTabsValue: '1',
        group_list: [],
        g_list: [], // 分组条件集合
        u_list: [], // 关联条件集合
        unionObj: {
          vs_meta_id1: '',
          vs_meta_id2: '',
          vs_col1: '',
          vs_col2: ''
        },
        options: [
          {value: '1', label: '编码'},
          {value: '2', label: '英文'},
          {value: '3', label: '中文'}
        ],
        showType: '3',
        contShowType: '1',
        contShowText: '切换为echart',
        chartOption: option,
        chartData: null,
        showSqlList: [],
        pageNo: 1,
        pageSize: 10,
        pageTotal: 0
      }
    },
    methods: {
      // 获取通用数据
      getCommonData () {
        ajax.post(api.QUERYALLCOMMONDATA).then(res => {
          this.commonData = res.data
          this.treeData.forEach(item => {
            if (item.meta_id === 'vs_ct0003') {
              item.children = this.commonData.META_TGT
            }
          })
        })
      },
      // 获取数据包物理表
      getMetaDataPkgList () {
        ajax.post(api.SELECT_META_DATA_PKG_LIST).then(res => {
          this.metaDataPkgList = res.data
        })
      },
      // 获取物理表字段树
      getMetaTableColumeList (val) {
        this.reset()
        let params = {
          meta_id: val
        }
        ajax.post(api.SELECT_METATABLE_COLUME_LIST, params).then(res => {
          this.menuTree = res.data
        })
      },
      // 切换菜单树
      toggleMetaTree (index) {
        this.isShowColumes.splice(index, 1, !this.isShowColumes[index])
      },
      handleLeave (index) {
        if (this.currentIndex === index) {
          this.currentIndex = -1
        }
      },
      // 处理树节点操作
      handleColumeSetting (checked, obj) {
        if (checked) {
          this.addCondColume(obj)
        } else {
          this.removeCondColume(obj)
        }
      },
      // 拖拽元素进入显示列
      handleDragStart (ev, obj) {
        ev.dataTransfer.setData('Text', JSON.stringify(obj))
      },
      // 允许拖拽元素放置
      handleDragOver (ev) {
        ev.preventDefault()
      },
      // 拖拽元素放置显示框
      handleDrop (ev) {
        ev.preventDefault()
        let obj = JSON.parse(ev.dataTransfer.getData('Text'))
        this.addShowColume(obj)
      },
      // 添加查询数据列
      addShowColume (obj) {
        let count = this.s_list.length
        let itemData = {
          disp_serial: count,
          meta_id: obj.meta_id,
          cond_type: '',
          vs_colume_name: obj.colume_name,
          vs_colume_chs: obj.colume_chs
        }
        let repeatArr = this.s_list.filter(item => {
          if (item.meta_id === obj.meta_id) {
            return item
          }
        })
        if (repeatArr.length > 0) {
          this.$message({
            type: 'info',
            message: '该数据已存在记录中'
          })
        } else {
          let dataObj = Object.assign(itemData, {
            'vs_st0001': false,
            'vs_rm0002': false,
            'vs_ct0003': false
          })
          this.s_list.splice(count, 0, dataObj)
        }
        this.temp_s_list = JSON.parse(JSON.stringify(this.s_list))
      },
      // 移除查询数据列
      removeShowColume (obj) {
        let index = this.s_list.indexOf(obj)
        if (index !== -1) {
          this.s_list.splice(index, 1)
        }
        this.temp_s_list = JSON.parse(JSON.stringify(this.s_list))
      },
      // 数据显示列设置
      handleSetting (settingData, obj) {
        this.s_list.forEach((data, index) => {
          if (data.meta_id === obj.meta_id) {
            settingData.forEach(item => {
              let setFlag = obj[item.data.meta_id]
              if (item.data.meta_id.indexOf('vs_') !== -1) {
                if (item.data.meta_id === 'vs_rm0002') {
                  if (item.checked) {
                    this.s_list.splice(index, 1)
                  }
                } else {
                  obj[item.data.meta_id] = !setFlag
                  this.$set(this.s_list, index, obj)
                }
              } else if (item.data.meta_id.indexOf('MG') !== -1) {
                let oldObj = JSON.parse(JSON.stringify(this.temp_s_list[index]))
                if (item.checked) {
                  let codeStr = (item.data.meta_id).toLowerCase()
                  obj.cond_type = codeStr
                  obj.vs_colume_name = `${codeStr}_${oldObj.vs_colume_name}`
                  obj.vs_colume_chs = `${oldObj.vs_colume_chs}(${item.data.tgt_name})`
                } else {
                  obj.cond_type = ''
                  obj.vs_colume_name = oldObj.vs_colume_name
                  obj.vs_colume_chs = oldObj.vs_colume_chs
                }
                this.s_list.splice(index, 1, obj)
                this.queryList()
              }
            })
          }
        })
      },
      keyupSubmit () {
         document.onkeydown = e => {
            let _key = window.event.keyCode
            if (_key === 13) {
              this.queryList()
            }
          }
        },
      // 添加条件数据列
      addCondColume (obj) {
        let count = this.cond_arr1.length
        let itemData = {
          disp_serial: count,
          meta_id: obj.meta_id,
          data_type: obj.data_type,
          vs_colume_name: obj.colume_name,
          vs_colume_chs: obj.colume_chs,
          vs_p_meta_id: obj.p_meta_id,
          vs_table_name: obj.table_name,
          vs_table_name_cns: obj.table_name_cns
        }
        if (JSON.stringify(this.cond_arr1).indexOf(JSON.stringify(itemData)) > 0) {
          this.$message({
            type: 'info',
            message: '该数据已存在记录中'
          })
        } else {
          this.cond_arr1.splice(count, 0, itemData)
        }
      },
      // 移除条件数据列
      removeCondColume (obj) {
        let index = this.cond_arr1.indexOf(obj)
        if (index !== 1) {
          this.cond_arr1.splice(index, 1)
        }
      },
      // 添加查询条件组
      addCondList () {
        let count = this.w_list.length
        let groupData = {
          vs_bool_code: 'B010006',
          vs_bool_code_value: this.commonData.B010006[0].code_value,
          disp_serial: count,
          cond_link: '',
          cond_groups: []
        }
        let itemData = {
          vs_data_type: '',
          vs_code: '',
          vs_code_value: '',
          vs_bool_code: 'B010006',
          vs_bool_code_value: this.commonData.B010006[0].code_value,
          vs_cond_list: [],
          meta_id: null,
          disp_serial: '',
          cond_link: '',
          cond_fmt: '',
          cond_value: []
        }
        this.w_list.splice(count, 0, groupData)
        this.w_list[count].cond_groups.splice(0, 0, itemData)
        itemData.disp_serial = this.w_list[count].cond_groups.length - 1
        itemData.cond_link = `${itemData.vs_bool_code}#${itemData.vs_bool_code_value}`
        groupData.cond_link = `${groupData.vs_bool_code}#${groupData.vs_bool_code_value}`
        if (this.w_list.length > 1) {
          this.isMultiGroup = true
        }
      },
      // 移除查询条件组
      removeCondList (index) {
        this.w_list.splice(index, 1)
        if (this.w_list.length > 1) {
          this.isMultiGroup = true
        } else {
          this.isMultiGroup = false
        }
      },
      // 添加查询条件
      addCond (group, index) {
        let itemData = {
          vs_data_type: '',
          vs_code: '',
          vs_code_value: '',
          vs_bool_code: 'B010006',
          vs_bool_code_value: this.commonData.B010006[0].code_value,
          vs_cond_list: [],
          vs_input_num: 0,
          meta_id: null,
          disp_serial: index + 1,
          cond_link: '',
          cond_fmt: '',
          cond_value: []
        }
        itemData.cond_link = `${itemData.vs_bool_code}#${itemData.vs_bool_code_value}`
        group.cond_groups.splice(index + 1, 0, itemData)
      },
      // 移除查询条件
      removeCond (index, gindex) {
        if (this.w_list.length === 1) {
          if (this.w_list[index].cond_groups.length === 1) {
            this.removeCondList(index)
          } else {
            if (gindex === 0) {
              this.w_list[index].cond_groups.splice(gindex, 1)
              this.w_list[index].cond_groups[gindex].cond_link = ''
            } else {
              this.w_list[index].cond_groups.splice(gindex, 1)
            }
          }
        } else {
          if (this.w_list[index].cond_groups.length === 1) {
            this.removeCondList(index)
          } else {
            if (gindex === 0) {
              this.w_list[index].cond_groups.splice(gindex, 1)
              this.w_list[index].cond_groups[gindex].cond_link = ''
            } else {
              this.w_list[index].cond_groups.splice(gindex, 1)
            }
          }
        }
      },
      // 根据字段属性获取条件
      handleCondChange (obj) {
        obj.vs_code_value = ''
        obj.cond_value = []
        this.cond_arr1.forEach(item => {
          if (item.meta_id === obj.meta_id) {
            if (item.data_type === 'text') {
              obj.vs_cond_list = this.commonData.B010003
              obj.vs_data_type = 'text'
              obj.vs_code = 'B010003'
            } else if (item.data_type === 'number') {
              obj.vs_cond_list = this.commonData.B010004
              obj.vs_data_type = 'number'
              obj.vs_code = 'B010004'
            } else if (item.data_type === 'date') {
              obj.vs_cond_list = this.commonData.B010005
              obj.vs_data_type = 'date'
              obj.vs_code = 'B010005'
            }
          }
        })
      },
      // 根据条件符获取数据
      handleCondSymbolChange (item) {
        item.cond_fmt = `${item.vs_code}#${item.vs_code_value}`
        let inputGroup1 = ['01', '02', '03', '04', '05', '06', '07', '08']
        let inputGroup2 = ['09', '10'] // 数据类型为text或date时，condInputNum为1，数据类型为number时，condInputNum为0
        if (inputGroup1.indexOf(item.vs_code_value) !== -1) {
          item.vs_input_num = 1
        } else if (inputGroup2.indexOf(item.vs_code_value) !== -1 && item.vs_data_type !== 'number') {
          item.vs_input_num = 1
        } else if (item.vs_code_value === '11' && item.vs_data_type === 'number') {
          item.vs_input_num = 2
        } else if (item.vs_code_value === '15' && item.vs_data_type === 'date') {
          item.vs_input_num = 2
        } else {
          item.vs_input_num = 0
        }
      },
      // 切换条件组中的'且/或'
      toggleRelation (item) {
        if (item.vs_bool_code_value === 'and') {
          item.vs_bool_code_value = 'or'
        } else {
          item.vs_bool_code_value = 'and'
        }
        item.cond_link = `${item.vs_bool_code}#${item.vs_bool_code_value}`
      },
      // 切换关联tab
      handleTabClick (elem) {
        this.editableTabsValue = elem.name
      },
      // 将分组字段数组转化为数组对象
      handleGroupChange () {
        this.g_list = this.group_list.map(item => {
          return {
            meta_id: item
          }
        })
      },
      handleUnionChange (val, ind) {
        this.cond_arr1.forEach(item => {
          if (item.meta_id === val) {
            if (ind === '1') {
              this.unionObj.vs_col1 = item
            } else if (ind === '2') {
              this.unionObj.vs_col2 = item
            }
          }
        })
      },
      // 添加表关联关系
      addTableRelation () {
        let relationObj = {...this.unionObj}
        let relStr1 = `${relationObj.vs_col1.vs_p_meta_id}.${relationObj.vs_col1.meta_id}=${relationObj.vs_col2.vs_p_meta_id}.${relationObj.vs_col2.meta_id}`
        let relStr2 = `${relationObj.vs_col2.vs_p_meta_id}.${relationObj.vs_col2.meta_id}=${relationObj.vs_col1.vs_p_meta_id}.${relationObj.vs_col1.meta_id}`
        if (this.u_list.length > 0) {
          let existFlag = false
          this.u_list.forEach(item => {
            if (item.rel_str === relStr1 || item.rel_str === relStr2) {
              this.$message({
                type: 'warning',
                message: '已存在该关联条件'
              })
              existFlag = true
            }
          })
          if (!existFlag) {
            let itemData = {
              rel_str: relStr1
            }
            let sqlData = {
              rel_str: relStr1,
              rel_code: `${relationObj.vs_col1.vs_table_name}.${relationObj.vs_col1.vs_colume_name}=${relationObj.vs_col2.vs_table_name}.${relationObj.vs_col2.vs_colume_name}`,
              rel_chs: `${relationObj.vs_col1.vs_table_name_cns}.${relationObj.vs_col1.vs_colume_chs}=${relationObj.vs_col2.vs_table_name_cns}.${relationObj.vs_col2.vs_colume_chs}`
            }
            this.u_list.splice(this.u_list.length, 0, itemData)
            this.showSqlList.splice(this.showSqlList.length, 0, sqlData)
          }
        } else {
          let itemData = {
            rel_str: relStr1
          }
          let sqlData = {
            rel_str: relStr1,
            rel_code: `${relationObj.vs_col1.vs_table_name}.${relationObj.vs_col1.vs_colume_name}=${relationObj.vs_col2.vs_table_name}.${relationObj.vs_col2.vs_colume_name}`,
            rel_chs: `${relationObj.vs_col1.vs_table_name_cns}.${relationObj.vs_col1.vs_colume_chs}=${relationObj.vs_col2.vs_table_name_cns}.${relationObj.vs_col2.vs_colume_chs}`
          }
          this.u_list.splice(this.u_list.length, 0, itemData)
          this.showSqlList.splice(this.showSqlList.length, 0, sqlData)
        }
      },
      // 删除表关联关系
      removeTableRelation (item) {
        let index = this.showSqlList.indexOf(item)
        if (index !== -1) {
          this.u_list.splice(index, 1)
          this.showSqlList.splice(index, 1)
        }
      },
      // 重置
      reset () {
        this.s_list = []
        this.tableData = []
        this.group_list = []
        this.isMultiGroup = false
        this.editableTabsValue = '1'
        this.g_list = []
        this.u_list = []
        this.cond_arr1 = []
        this.w_list = []
        this.showSqlList = []
        this.showType = '1'
        this.contShowType = '1'
        this.contShowText = '切换为echart'
        this.chartData = null
        this.unionObj.vs_meta_id1 = ''
        this.unionObj.vs_meta_id2 = ''
        this.unionObj.vs_col1 = ''
        this.unionObj.vs_col2 = ''
      },
      // 查询表格数据
      queryList () {
        let params = {
          'analyse_type': '10',
          'pkg_meta_id': this.metaDataPkg,
          's_list': this.s_list,
          'g_list': this.g_list,
          'u_list': this.u_list,
          'w_list': this.w_list,
          'page': {
            pageNo: this.pageNo,
            pageSize: this.pageSize
          }
        }
        ajax.post(api.ANALYSESEARCHOBJECT, params).then(res => {
          this.pageTotal = res.data.total
          if (res.data.rows.length > 0) {
            this.tableData.splice(0, this.tableData.length, ...res.data.rows)
          } else {
            this.tableData.splice(0, this.tableData.length)
          }
          if (res.data.chart) {
            this.chartData = res.data.chart
          }
        })
        if (this.contShowType === '2') {
          this.handleEchartData()
        }
      },
      toggleEchart () {
        if (this.contShowType === '1') {
          this.contShowType = '2'
          this.contShowText = '切换为table'
          this.handleEchartData()
        } else {
          this.contShowType = '1'
          this.contShowText = '切换为echart'
        }
      },
      handleEchartData () {
        if (this.chartData) {
          this.chartOption.legend.data = []
          this.chartOption.series = []
          this.chartOption.xAxis.data = []
          this.chartOption.legend.data = this.chartData.legend
          this.chartData.series.forEach(item => {
            let chartData = {
              name: item.legend,
              data: item.data,
              stack: '总量',
              type: 'line'
            }
            this.chartOption.series.push(chartData)
          })
          this.chartOption.xAxis.data = this.chartData.xaxis
        }
      },
      // 分页，每页显示数据条数
      handleSizeChange (val) {
        this.pageSize = val
        this.handleCurrentChange()
      },
      // 分页，当前页
      handleCurrentChange (val) {
        if (val) {
          this.pageNo = val
        }
        this.queryList()
      }
    },
    created () {
      this.s_list = []
      this.cond_arr1 = []
      this.getCommonData()
      this.getMetaDataPkgList()
      this.keyupSubmit()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #improviseSearch
    height 100%
    .main-cont
      padding 10px 10px 10px 10px
      height calc(100% - 56px)
    .menu-box
      height 100%
      padding 20px 0
      background #fff
      .menu-search
        padding 0 15px
        .el-select
          display block
          width 100%
      .menu-tree
        padding 10px 0
        user-select none
        .title
          display block
          padding 0 15px 0 30px
          height 30px
          line-height 30px
          position relative
          cursor pointer
          font-size 12px
          &:before
            content "\E60E"
            position absolute
            left 10px
            top 0
            font-family element-icons !important
            color #ddd
            transform rotate(0)
            transition transform .3s linear
          &.show:before
            transform rotate(90deg)
          &.show + ul
            max-height 400px
            &::-webkit-scrollbar
              width 0
              height 0
        ul
          max-height 0
          overflow hidden
          transition max-height .4s linear
          li
            font-size 12px
            padding 0 30px
            height 30px
            line-height 30px
            overflow hidden
            position relative
            transition background-color .3s linear
            &:hover
              background #f5f7fa
            &.active
              background #f5f7fa
              .el-icon-plus
                color #016DFB
            .el-icon-plus
              position absolute
              right 10px
              top 0
              width 30px
              height 30px
              padding 0
              margin 0
              color #ddd
              &:hover
                color #016DFB
    .data-table-box
      margin-left 3px
      .cond-select-box
        padding 20px 10px 0
        background #fff
    .query-col-box
      border 1px solid #ebeef5
      .title
        position relative
        h3
          margin 0
          padding 0 10px
          height 40px
          line-height 40px
          font-size 16px
          font-weight normal
          border-bottom 1px solid #ebeef5
        .el-icon-plus
          position absolute
          right 10px
          top 50%
          margin-top -8px
          color #48aadc
      .columes-box
        display block
        height 304px
        width 100%
        &::-webkit-scrollbar
          width 0
          height 0
        ul
          height 100%
        li
          width 100%
          height 36px
          line-height 36px
          padding 0 30px 0 10px
          border-bottom 1px solid #ebeef5
          position relative
          cursor pointer
          user-select none
          font-size 12px
          &:last-child
            border-bottom 0 none
        .el-icon-setting
          position absolute
          top 0
          right 10px
    .link-query-box
      padding 10px 0
      position relative
      h3
        height 40px
        line-height 40px
        text-align left
        font-size 18px
        font-weight normal
        margin 0
      .add-condition
        .el-icon-plus
          width 30px
          height 30px
          line-height 30px
          padding 0
        span
          font-size 12px
          color #016DFB
          margin-left 10px
      .condition-set-box
        padding-left 35px
        position relative
        &:before
          content ''
          position absolute
          left 15px
          top 0
          bottom 0
          width 1px
          background #d8dce5
        .condition-btn
          position absolute
          left 0
          top 50%
          width 30px
          height 30px
          margin-top -15px
          padding 0
        .condition-list-group
          margin-bottom 20px
          .el-button
            height 32px
            line-height 0px
          .condition-groups
            overflow hidden
            .item
              padding 10px 0
              .el-select
                display block
                height 32px
              .el-date-editor
                display block
                height 32px
                width 100% !important
              .el-input__icon
                line-height 32px
              .el-button
                width 18px
                & + .el-button
                  margin-left 0
          .relation-box
            padding 10px 0
            .el-button
              display block
              width 30px
              padding 0
    .join-box
      .tab-nav
        .el-tabs__header
          margin-bottom 0
      .tab-cont
        padding 20px 15px 30px
        border 1px solid #e4e7ed
        border-top 0 none
        height 305px
        width 100%
        &::-webkit-scrollbar
          width 0
          height 0
        .el-select
          display block
          height 32px
          margin 0
        .mark
          display block
          height 32px
          line-height 32px
          text-align center
    .sql-show-box
      margin 20px 0 0
      border 1px solid #e4e7ed
      .sql-head
        height 40px
        position relative
        .title
          height 40px
          line-height 40px
          font-size 16px
          padding 0 10px
          margin 0
          font-weight normal
          border-bottom 1px solid #e4e7ed
        .el-select
          position absolute
          right 0
          top 0
          height 40px
          .el-input__inner
            font-size 13px
            width 70px
            border 0 none
      .cont-box
        height 160px
        padding 15px
        &::-webkit-scrollbar
          width 0
          height 0
        ul
          li
            height 32px
            line-height 32px
            text-transform uppercase
            overflow hidden
            span
              float left
            .edit-box
              float left
              padding 0 15px
              .el-button
                width 30px
                margin-left 0
                padding 0
                height 30px
                font-size 14px
                font-weight bold
                color #333
                &:hover
                  color #016DFB
    .button-group-box
      padding 20px 10px
      text-align right
      background #fff
    .data-box
      margin-top 20px
      padding 0px 10px 20px
      background #fff
      .button-group-box
        background rgba(0, 0, 0, 0)
      .echarts
        width 100% !important

    .sql-show-box
      .sql-head
        .el-select
          .el-input__inner
            padding-right 0px
  .el-popover
    .el-checkbox
      display block
      height 36px
      line-height 36px
      & + .el-checkbox
        margin-left 0

  .no_record_box
    font-size 14px
    text-align center
    color #909399
    padding 20px 10px

  /*.el-pagination
    padding 10px 5px*/
</style>
